react-native 之九宫格列表

就是类似这种的列表. 在 iOS 中有 UICollectionView 可以直接写这种类型的列表, 但在React-native 中直接就可以用 FlatList 完成, 也就是说这种类型的列表和普通的列表没什么区别, 只是在布局的时候要些许的差异. Let’s do it!

先上效果图:

1.渲染一个列表

render() {
       return (
           <View style={styles.container}>
               <FlatList
                   data={this.state.data}
                   renderItem={this.renderItem}
                   keyExtractor={(item, index) => index}
                   contentContainerStyle={styles.list_container}
               />
           </View>
       )
   };

2. 给列表一个样式

list_container: {
        // 主轴方向
        flexDirection:'row',
        justifyContent: 'space-between',
        // 一行显示不下,换一行
        flexWrap:'wrap',
        // 侧轴方向
        alignItems:'center', // 必须设置,否则换行不起作用
        paddingHorizontal: 20,
    },

这里注意: flexDirection flexWrap alignItems 这三个属性是必须设置的.

其实写九宫格列表最重要的就是这一块.

完整代码:

const {width, height} = Dimensions.get('window')
const cols = 2;
const vMargin = 20;
const cellWH = (width-2*vMargin-15)/cols;
const hMargin = 25;

export default class AllRecommend extends Component {


    constructor(props) {
        super(props)
        this.state = {
            data: [],
        }
    };

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={(item, index) => index}
                    contentContainerStyle={styles.list_container}
                />
            </View>
        )
    };

    renderItem({item, index})  {

        return (
            <TouchableOpacity activeOpacity={0.5}>
                <View style={styles.item}>
                    <Image source={{uri: item['image']}} style={{width: cellWH,height:cellWH, borderRadius: 5}}/>
                    <Text style={{marginTop: 5, textAlign: 'center'}} numberOfLines={1}>{item.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    fetchData() {
        NetRequest.get('https://api.douban.com/v2/music/search?q=李志',null,null).then((response) => {
            this.setState({
                data: response['musics']
            })
        }, (error) => {

        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: color.white,
        paddingVertical: 15,
    },
    list_container: {
        // 主轴方向
        flexDirection:'row',
        justifyContent: 'space-between',
        // 一行显示不下,换一行
        flexWrap:'wrap',
        // 侧轴方向
        alignItems:'center', // 必须设置,否则换行不起作用
        paddingHorizontal: 20,
    },
    item: {
        width:cellWH,
        marginTop:hMargin,
        alignItems: 'center',
    }
})

每一个 item 的大小尺寸可以根据自己的实际需求去设置.

enjoy it!

小白开发交流群: 860196537